import React, { useCallback, useMemo, useState, PureComponent } from 'react';

export default function FunPage1() {
    const [count, setcount] = useState(0);
    const [value, setvalue] = useState("");
    const expensice = useMemo(() => {
        console.log("expence")
        let sum = 0
        for (let i = 0; i < count; i++) {
            sum += i;
        }
        return sum;
    }, [count])

    const addClick = useCallback(() => {
        let sum2 = 0
        for (let i = 0; i < count; i++) {
            sum2 += i;
        }
        return sum2;
    }, [count])

    return (
        <div>
            <h3>FunPage</h3>
            <div>
                <p>count:
                    <span>{count}</span>
                </p>
                <p>sum:{expensice}</p>
                <button onClick={() => setcount(count + 1)}>add</button>
            </div>
            <input type="text" value={value} onChange={e => setvalue(e.target.value)} />
            <Child addClick={addClick} />
        </div>
    );
}


class Child extends PureComponent {
    render() {
        const { addClick } = this.props;
        console.log("child")
        return (
            <div>
                <h3>Child</h3>
                <button onClick={() => console.log(addClick())}>addd</button>
            </div>
        );
    }
}
